<ui:composition xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:rich="http://richfaces.org/rich"
      xmlns:c="http://java.sun.com/jsp/jstl/core"
      xmlns:acm="http://java.sun.com/jsf/composite/comp">
      
   	<div>
   		<div class="wizard-steps">
			<div class="completed-step"><a href="#"><span>1</span> Dealer Info</a></div>
			<div class="active-step"><a href="#"><span>2</span> Dealer Locations</a></div>
			<div><a href="#"><span>3</span> Upload Images</a></div>															
		</div>
		<h:panelGrid id="LocationsGrid">
			<rich:tabPanel switchType="client" activeItem="#{cntCtrl.activeLocationItem}" 
				style="width:100%;">
				<c:forEach items="#{cntCtrl.dealer.locations}" var="loc" varStatus="stat">
					<rich:tab header="#{stat.index == 0 ? 'Primary Location' : 'Secondary Location'}" 
						name="item#{stat.index}" style="width:100%;" >
						<h:panelGrid width="100%" columns="6" columnClasses="rightAlign col-padding, leftAlign col-padding, 
							rightAlign col-padding, leftAlign col-padding, rightAlign col-padding, leftAlign col-padding"
							rowClasses="s1row">
				   			<h:outputLabel value="Address Type#{stat.index}:" />
				   			<acm:uiTypes value="#{loc.locationType}" typeName="locationTypes" label="Address Type" disabled="true"/>
				   			<h:outputLabel value="Description:" />
				   			<h:inputText value="#{loc.locationDesc}" label="Description" size="25"/>
				   			<h:outputLabel value="Email:" />
				   			<h:inputText value="#{loc.email}" label="Email" size="25" required="true"/>
				   			<h:outputLabel value="Address 1:" />
				   			<h:inputText value="#{loc.address1}" label="Address 1" required="true"/>
				   			<h:outputLabel value="Address 2:" />
				   			<h:inputText value="#{loc.address2}" label="Address 2"/>
				   			<h:outputLabel value="City:" />
				   			<h:inputText value="#{loc.city}" label="City" required="true"/>
				   			<h:outputLabel value="State:" />
				   			<acm:uiTypes value="#{loc.state}" typeName="states" label="State" required="true"/>
				   			<h:outputLabel value="Country:" />
				   			<acm:uiTypes value="#{loc.country}" typeName="countries" label="Country"/>
				   			<h:outputLabel value="Zip:" />
				   			<h:inputText value="#{loc.zip}" label="Zip" required="true"/>
				   			<h:outputLabel value="Home Phone:" />
				   			<h:inputText value="#{loc.homePhone}" label="Home Phone"/>
				   			<h:outputLabel value="Cell Phone:" />
				   			<h:inputText value="#{loc.cellPhone}" label="Cell Phone"/>
				   			<h:outputLabel value="Business Phone:" />
					   		<h:inputText value="#{loc.busPhone}" label="Business Phone"  required="true"/>
					   		<h:outputText value="" />
					   		<h:outputText value="" rendered="#{loc.persistent}"/>
					   		<a4j:commandLink value="Discard Location" action="#{cntCtrl.discardLocation(stat.index)}" 
					   			render="LocationsGrid" rendered="#{!loc.primary}" execute="@this">
					   		</a4j:commandLink>
					   		<h:outputText value="" />
					   		<h:outputText value="" rendered="#{loc.persistent}"/>
					   		<a4j:commandLink value="Copy From Primary" action="#{cntCtrl.copyPrimaryLocation(stat.index)}" 
					   			render="LocationsGrid" rendered="#{!loc.persistent}" execute="@this">
					   		</a4j:commandLink>
					   		<h:outputText value="" />
					   		<a4j:commandLink value="Add Another Location" actionListener="#{cntCtrl.addNewLocation}" render="LocationsGrid"
					   			rendered="#{!loc.persistent or cntCtrl.dealer.locations.size() ==1 }">
					   		</a4j:commandLink>					                            				                            			
				       	</h:panelGrid>				       	
					</rich:tab>
				</c:forEach>
			</rich:tabPanel>			
		</h:panelGrid>
        <acm:spacer height="40"/>
   		<div class="navPanel" >
   			<a4j:commandButton value="&lt;&lt;Previous" styleClass="button1 alignright" immediate="true">
	            <rich:toggleControl targetItem="@prev" event="click" />
	        </a4j:commandButton>
	        <a4j:commandButton styleClass="fright button1" value="Next &gt;&gt;">
	            <rich:toggleControl targetItem="@next" event="click"/>
	        </a4j:commandButton>
	    </div>
   	</div>
</ui:composition>   	